<template>
  <a-layout>
      
    <a-layout-header style="background: #fff; padding: 0">
      <a-breadcrumb style="margin: 2px 10px">
        <a-breadcrumb-item>人员列表</a-breadcrumb-item>
        <a-breadcrumb-item>人员详情</a-breadcrumb-item>
        <a-breadcrumb-item>人员编辑</a-breadcrumb-item>
      </a-breadcrumb>
      <header style="padding-left: 20px; ">编辑页</header>
    </a-layout-header>
     <a-alert
      v-if="visible"
      :message="message"
      :type="ok_no"
      closable
      :after-close="handleClose"
    />
    <a-layout-content style="margin: 20px 16px">
      <div :style="{ padding: '24px', background: '#fff', minHeight: '360px' }">
        <a-form :form="form" @submit="handleSubmit">
          <a-form-item v-bind="formItemLayout">
            <span slot="label">姓名</span>
            <a-input
              v-decorator="[
          'username',
          {
            rules: [{ required: true, message: 'Please input your name!', whitespace: true }],
          },
        ]"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="E-mail">
            <a-input
              v-decorator="[
            'email',
            {
                rules: [
                {
                    type: 'email',
                    message: 'The input is not valid E-mail!',
                },
                {
                    required: true,
                    message: 'Please input your E-mail!',
                },
                ],
            },
            ]"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="年龄">
            <a-input-number
              v-decorator="['age', { initialValue: 18 , rules: [{ required: true, message: 'Please input your age!' }]}]"
              :min="1"
              :max="120"
            />
          </a-form-item>
         <a-form-item v-bind="formItemLayout" label="电话号码">
      <a-input
        v-decorator="[
          'phone',
          {
            rules: [
                { required: true, message: 'Please input your phone number!' },
                {
                    validator: validateToPhone,
                 },
                
            ],
          },
        ]"
        style="width: 100%"
      >
        <a-select
          slot="addonBefore"
          v-decorator="['prefix', { initialValue: '86' }]"
          style="width: 70px"
        >
          <a-select-option value="86">
            +86
          </a-select-option>
          <a-select-option value="87">
            +87
          </a-select-option>
        </a-select>
      </a-input>
    </a-form-item>
          <a-form-item :wrapper-col="{ span: 12, offset: 6 }">
            <a-button type="primary" html-type="submit">提交</a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-layout-content>
  </a-layout>
</template>

<script>
export default {
  data: () => ({
      visible: false,
      ok_no: 'success',
      message: '修改成功',

    formItemLayout: {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 }
    }
  }),
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: "validate_other" });
  },
  methods: {
    //   关闭谈话框
        handleClose(){
            this.visible = false
        },
      // 校验电话号码
         validateToPhone(rule, value, callback) {
          const form = this.form;
          var res = form.getFieldValue('phone')
        //   console.log(res)
         if(!(/^1[3456789]\d{9}$/.test(res))){
             callback('电话号码错了');
         }else{
             callback()
         }
  
      },


    
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFields((err, values) => {
          const user_id = this.$route.params.id
        if (!err) {
            this.$ajax({
            method: 'put',
            url:`/worker/user/${user_id}`,
            data:values,
            header:{
                'Content-Type':'application/json'  //如果写成contentType会报错
            }
        }).then((response) => {
            if(response.data.msg===200){
                // this.visible = true
                this.visible=true
            }else{
                this.message = '修改失败',
                this.ok_no = 'error'
            }
            // if (response.data.data.msg==200){
            //     alert('jl')
            // }
        })
        }
      });
    },
    normFile(e) {
      console.log("Upload event:", e);
      if (Array.isArray(e)) {
        return e;
      }
      return e && e.fileList;
    }
  }
};
</script>
<style  scoped>
</style>